<template>
  <div>


    <el-table :data="materialsList" style="width: 100%">

      <el-table-column label="编号">
        <!-- 插槽，类似于迭代变量 -->
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.matId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="材料">

        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.matName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="价格">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.matPrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="数量">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.matNumber }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="loaddata1(scope.row)">进货</el-button>
          <el-button size="mini" type="danger" @click="delInfo(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- page-size:默认每页显示条数 -->

    <div class="block">
      <el-pagination @size-change="selectPage" @current-change="handleCurrentChange" :current-page="curPage"
        :page-sizes="[1, 3, 5, 7]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>


    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="isShow" width="70%">


      <el-table :data="matSupList" style="width: 100%">


        <el-table-column label="供应商">
          <!-- 插槽，类似于迭代变量 -->
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.supName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="负责人">

          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.supManager }}</span>
          </template>
        </el-table-column>

        <el-table-column label="单价">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.comPrice }}</span>
          </template>
        </el-table-column>

        <el-table-column label="联系电话">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.supIphone }}</span>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">

        <el-col :span="3" style="position: absolute; right: 40%;">
          <el-input placeholder="请输入数量" v-model="num"></el-input>
        </el-col>


        <el-select v-model="matSupForm.supName" placeholder="请选择">
          <el-option v-for="item in matSupList" :key="item.supName" :label="item.supName" :value="item.supName">
          </el-option>
        </el-select>

        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="saveInfo">确定进货</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    name: "materialsList",
    data() {
      return {

        materialsList: [],
        matSupList: [],
        title: "新增", //模态框标题
        materialsForm: { //表单的请求项
          matId: null,
          matName: "",
          matNumber: "",
          matPrice: ""
        },
        matSupForm: { //表单的请求项
          matId: null,
          matName: "",
          matNumber: null,
          matPrice: "",
          supName:""
        },
        num: 0,
        total: 0, //总条数
        totalPage: 0, //总页数
        curPage: 1, //当前页
        rows: 5, //每页显示条数
        isShow: false
      }
    },
    methods: {
      loaddata() { //加载数据
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/Materials/materialsList",
          type: "get",
          data: {
            "page": mythis.curPage,
            "row": mythis.rows
          },
          dataType: "json",
          success: function(data) {
            console.log(data)
            mythis.materialsList = data.info;
            mythis.total = data.total;
            mythis.totalPage = data.totalPage
          }

        })
      },
      add() {
        this.isShow = true;
        //更改模态框的标题
        this.title = "新增";
        //清除表单元素
        this.materialsForm.matId = null;
        this.materialsForm.matName = "";
        this.materialsForm.matNumber = "";
        this.materialsForm.matPrice = "";

      },
      update(x) { //打开修改模态框
        this.isShow = true;
        //更改模态框的标题
        this.title = "修改";
        //把选中的值赋值给模态框的表单元素
        this.materialsForm.matId = x.matId;
        this.materialsForm.matName = x.matName;
        this.materialsForm.matNumber = x.matNumber;
        this.materialsForm.matPrice = x.matPrice;

      },

      loaddata1(x) { //加载数据

        this.isShow = true;
        //更改模态框的标题
        this.title = x.matName;

        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/Materials/matSupList",
          type: "get",
          data: {
            "page": mythis.curPage,
            "row": 5,
            "matId": x.matId
          },
          dataType: "json",
          success: function(data) {
            console.log(data)
            mythis.matSupList = data.info;
            mythis.matSupForm.matId = x.matId;
            mythis.matSupForm.matNumber = x.matNumber;
            mythis.matSupForm.matName = x.matName;
            mythis.matSupForm.matPrice = x.matPrice;
            console.log(x.matPrice)
          }

        });
        this
      },
      saveInfo() { //保存
        console.log(this.matSupForm)
        var mythis = this;
        this.matSupForm.matNumber = this.num;
        $.ajax({
          url: "http://localhost:8080/Materials/updateMatSup",
          type: "get",
          data: mythis.matSupForm,
          dataType: "json",
          success: function(data) {
            console.log(data)
            mythis.$alert(data.info);
            if (data.info == "进货成功" || data.info == "新增成功") {
              //关闭模态框
              mythis.isShow = false;
              //刷新
              mythis.loaddata();
            }
          }
        })
      },
      delInfo(x) {
        var is = confirm("你确定删除数据吗？");
        if (is) {
          var mythis = this;
          $.ajax({
            url: "http://localhost:8080/Materials/delMaterials",
            type: "get",
            data: {
              "id": x.matId
            },
            dataType: "json",
            success: function(data) {
              console.log(data)
              mythis.$alert(data.info);
              if (data.info == "删除成功") {
                //关闭模态框
                mythis.isShow = false;
                //刷新
                mythis.loaddata();
              }
            }
          })
        }
      },
      indexPage() { //首页
        this.curPage = 1;
        this.loaddata();
      },
      endPage() { //尾页
        this.curPage = this.totalPage;
        this.loaddata();
      },
      prePage() { //上一页
        this.curPage--;
        if (this.curPage < 1) {
          this.curPage = 1;
        }
        this.loaddata();
      },
      nextPage() { //下一页
        this.curPage++;
        if (this.curPage > this.totalPage) {
          this.curPage = this.totalPage;
        }
        this.loaddata();
      },
      selectPage(v) { //用户选择的页数
        this.rows = v;
        this.loaddata();
      },
      handleCurrentChange(v) { //当前页触发事件
        this.curPage = v;
        this.loaddata();

      }
    },
    mounted() {
      this.loaddata();
    }
  }
</script>

<style>
</style>
